<template>
  <div>
    <el-card shadow="hover">
      <div class="title"><slot name="title"></slot></div>
      <div class="number"><slot name="number"></slot></div>
      <div class="chart"><slot name="chart"></slot></div>
      <div class="bottom"><slot name="bottom"></slot></div>
    </el-card>
  </div>
</template>

<script setup lang="ts" >
</script>

<style scoped  lang="scss">
$color1: yellowgreen;
.title {
  color: $color1;
  font-size: 16px;
}
.number {
  color: $color1;
  font-size: 25px;
  font-weight: 700;
  font-style: italic;
  margin-top: 5px;
}
.chart {
  width: 100%;
  height: 120px;
}
.bottom {
  color: $color1;
  border-top: 1px solid $color1;
  padding: 10px 0px;
  font-size: 14px;
}
</style>